<template>
	<div>


		
		<!-- <van-cell title="库房" is-link @click="showPopup" :value="spu" /> -->
		<van-cell title="Spu名称" is-link @click="showPopup" :value="spu"/>
		
		<van-popup v-model="show" position="bottom" :style="{ height: '60%' }">
			
			<!-- <van-picker title="Spu名称" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel"
				@change="onChange" :default-index="0"/> -->
				
				<div style="margin-left: 10px;font-weight: 800;">可过滤字段</div>
				
				<van-cell-group>
				  <van-field v-model="kw1" label="过滤字段1" placeholder="输入过滤字段1" />
				</van-cell-group>
				
				<van-cell-group>
				  <van-field v-model="kw2" label="过滤字段2" placeholder="输入过滤字段2" />
				</van-cell-group>
				
				<van-cell-group>
				  <van-field v-model="kw3" label="过滤字段3" placeholder="输入过滤字段3" />
				</van-cell-group>
				
				<van-cell title="选择Spu" is-link @click="show1=true" :value="spu"/>
			
		</van-popup>
		
		<van-popup v-model="show1" position="bottom" :style="{ height: '60%' }">
			
			<van-picker title="Spu名称" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel"
				@change="onChange" :default-index="0"/>
			
			</van-popup>
		
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'

	import {
		select_all_spu_url

	} from "../../utils/setting.js"
	export default {
		name: '',
		components: {},
		props: {},
		data() {
			return {
				spu: '请选择Spu名称',
				spu_id: '', 
				show: false,
				show1: false,
				
				all_spu_list: [],
				spu_list: [],
				columns: [],
				kw1: null,
				kw2: null,
				kw3: null,
			}
		},
		methods: {
			send_to_parent(){
				this.$emit('listenToChangeSpuIDEvent',{'spu_id': this.spu_id})
				
			},
			showPopup() {
				this.show = true;
			},
			
			onConfirm(value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
				this.spu = value
				this.spu_id = this.spu_list[index]['id']
				// this.show=false
				this.show1=false
				this.send_to_parent()

			},
			onChange(picker, value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
				this.spu = value
				this.spu_id = this.spu_list[index]['id']
				// console.log(this.spu_id)
				this.show1=false
				// this.show=false
				this.send_to_parent()
			},
			onCancel() {
				// Toast('取消');
				this.show=false
			},
			
			search(){
				
				this.spu_list = []
				this.columns = []
				
				if (this.kw1 == null){
					this.spu_list = this.all_spu_list
					// console.log(this.spu_list)
				} else {
					let result_list = []
					
					for(let i=0; i < this.all_spu_list.length; i++){
						// this.columns.push(this.spu_list[i]['spu_name'])
						
						let kw1_status = false;
						let kw2_status = false;
						let kw3_status = false;
						
						if (this.all_spu_list[i]['spu_name'].toLowerCase().indexOf(this.kw1.toLowerCase()) != -1){
							kw1_status = true
							// console.log('1111')
						}
					
						if (this.kw2 != null){
							
							if (this.all_spu_list[i]['spu_name'].toLowerCase().indexOf(this.kw2.toLowerCase()) != -1){
								kw2_status = true
								// console.log('222')
							}
							
							
						} else {kw2_status = true}
						
						
						if (this.kw3 != null){
							
							if (this.all_spu_list[i]['spu_name'].toLowerCase().indexOf(this.kw3.toLowerCase()) != -1){
								kw3_status = true
								// console.log('333')
							}
							
							
						} else {kw3_status = true}
						
						if (kw1_status == true && kw2_status == true && kw3_status == true){
							result_list.push(this.all_spu_list[i])
							// console.log('444')
						}
					
				
					}
					
					
					this.spu_list = result_list
					
				}
				
				// console.log(this.spu_list)
				for(let i=0; i < this.spu_list.length; i++){
					this.columns.push(this.spu_list[i]['spu_name'])
				}
				
			},

			get_all_spu() {

				this.$axios({
					method: 'GET',
					url: select_all_spu_url,
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					// let spu_list = response.data.resultBody.reverse()
					
					this.all_spu_list = response.data.resultBody.reverse()
					
					
					
					
					// if (this.kw1 == null){
					// 	this.spu_list = response.data.resultBody.reverse()
					// } else {
					// 	let result_list = []
						
					// 	for(let i=0; i < spu_list.length; i++){
					// 		// this.columns.push(this.spu_list[i]['spu_name'])
							
					// 		let kw1_status = false;
					// 		let kw2_status = false;
					// 		let kw3_status = false;
							
					// 		if (spu_list[i]['spu_name'].toLowerCase().indexOf(this.kw1.toLowerCase()) != -1){
					// 			kw1_status = true
					// 		}
						
					// 		if (this.kw2 != null){
								
					// 			if (spu_list[i]['spu_name'].toLowerCase().indexOf(this.kw2.toLowerCase()) != -1){
					// 				kw2_status = true
					// 			}
								
								
					// 		} else {kw2_status = true}
							
							
					// 		if (this.kw3 != null){
								
					// 			if (spu_list[i]['spu_name'].toLowerCase().indexOf(this.kw3.toLowerCase()) != -1){
					// 				kw3_status = true
					// 			}
								
								
					// 		} else {kw3_status = true}
							
					// 		if (kw1_status == true && kw2_status == true && kw3_status == true){
					// 			result_list.push(spu_list[i])
					// 		}
						

					// 	}
						
						
					// 	this.spu_list = result_list
						
					// }
					
					// console.log(this.spu_list)
					// for(let i=0; i < this.spu_list.length; i++){
					// 	this.columns.push(this.spu_list[i]['spu_name'])
					// }


				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			}

		},
		computed: {},
		watch: {
			
			kw1: function(val, oldVal) {
				// console.log('new: %s, old: %s', val, oldVal)
				this.search()
			},
			
			kw2: function(val, oldVal) {
				// console.log('new: %s, old: %s', val, oldVal)
				this.search()
			},
			
			kw3: function(val, oldVal) {
				// console.log('new: %s, old: %s', val, oldVal)
				this.search()
			},
			
		},
		created() {},
		mounted() {

			this.get_all_spu()


		},
	}
</script>

<style scoped lang="less">
	.cell_header_title {
		background-color: #F0F0F0;
		font-weight: 800;
	}
</style>
